<template>
  <div class="reg_container">
    <el-container class="reg_box">
      <!--左侧图片-->
      <el-aside width="55%" class="image"></el-aside>
      <!--注册表单-->
      <el-main>
        <h2>账号注册</h2>
        <el-form :model="regForm" :rules="rules" ref="ruleForm" class="reg_form">
          <!--手机号码-->
          <el-form-item prop="phone" class="input">
            <el-input v-model.trim="regForm.phone"
                      size="small" clearable placeholder="手机号码"
                      prefix-icon="el-icon-phone">
            </el-input>
          </el-form-item>
          <!--用户名-->
          <el-form-item prop="nickname" class="input">
            <el-input v-model.trim="regForm.nickname" type="nickname"
                      size="small" clearable placeholder="用户名"
                      prefix-icon="el-icon-user-solid">
            </el-input>
          </el-form-item>
          <!--密码-->
          <el-form-item prop="password" class="input">
            <el-input v-model.trim="regForm.password" type="password"
                      size="small" show-password placeholder="密码"
                      prefix-icon="el-icon-lock">
            </el-input>
          </el-form-item>
          <!--邮箱-->
          <el-form-item prop="email" class="input">
            <el-input v-model.trim="regForm.email" type="email"
                      size="small" clearable placeholder="邮箱"
                      prefix-icon="el-icon-message">
            </el-input>
          </el-form-item>
          <!--注册按钮-->
          <div class="buttons">
            <el-button class="reg_btn" type="primary" @click="register">注 册</el-button>
          </div>
        </el-form>
        <div class="footer">
          <span>已有账号？</span>
          <router-link class="routerLink" to="/login">
            <span>去登录</span>
          </router-link>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// 手机号验证
const validPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
// 邮箱验证
const validEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
export default {
  data(){
    return{
      // 注册表单数据
      regForm: {
        phone: '',
        nickname: '',
        password: '',
        email: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入正确的手机号码', validator: this.validatePhone, trigger: 'change' }
        ],
        password: [
          { required: true,  validator: this.validatePwd, trigger: 'change' }
        ],
        email: [
          { required: true, message: '请输入正确的邮箱', validator: this.validateEmail, trigger: 'change' }
        ],
      },
    };
  },
  methods:{
    /*注册功能*/
    register() {
      if (!this.regForm.phone){
        this.$message.error("手机号码不能为空！");
        return;
      } else if (!this.regForm.nickname) {
        this.$message.error("用户名不能为空！");
        return;
      } else if (!this.regForm.password) {
        this.$message.error("密码不能为空！");
        return;
      } else if (!this.regForm.email) {
        this.$message.error("邮箱不能为空！");
        return;
      } else {
        // 执行到这说明上面都不为空，下面校验输入是否合法（虽然表单已经校验了，但是没有拦截点击功能，错误的输入还是会提交）
        if (!validPhone.test(this.regForm.phone)) {
          this.$message.error("请输入有效的手机号码！");
          return;
        }
        if (!validEmail.test(this.regForm.email)) {
          this.$message.error("请输入有效的邮箱！");
          return;
        }
        // 到这里都合法，可执行注册操作
        let regInfo = this.$qs.stringify({
          phone: this.regForm.phone,
          nickname:this.regForm.nickname,
          password:this.regForm.password,
          email:this.regForm.email
        });
        // console.log(regInfo);
        this.$axios.post('/awareness/api/user/info',regInfo)
          .then((res)=>{
            // console.log(res);
            var state = res.data.status.code;
            // 提示当前注册状态
            if (state == 1) {
              this.$message.success('注册成功！');
              this.regForm.phone = '';
              this.regForm.nickname = '';
              this.regForm.password = '';
              this.regForm.email = '';
            } else if (state == -1) {
              this.$message.error('注册失败！');
              return;
            } else if (state == 3) {
              this.$message.warning('账号已存在');
              return;
            } else {
              // 其他的直接提示后端提交的内容
              var msg = res.data.status.message;
              this.$message.error(msg);
              return;
            }
          }).catch(() => {
            this.$message.error('注册失败！');
        });
      }
    },
    /**
     * 验证手机号是否正确
     * @param rule
     * @param value
     * @param callback
     */
    validatePhone(rule, value, callback) {
      if ((!validPhone.test(value)) && value !== ''){
        callback(new Error('请输入正确的手机号码'));
      } else if( !value) {
        callback();
      }
    },
    /**
     * 验证邮箱是否正确
     * @param rule
     * @param value
     * @param callback
     */
    validateEmail(rule, value, callback) {
      if ((!validEmail.test(value)) && value !== ''){
        callback(new Error('请输入正确的邮箱'));
      } else if( !value) {
        callback();
      }
    },
    validatePwd(rule, value, callback) {
      if (!value) {
        callback();
      } else if (value.toString().length < 6 || value.toString().length > 32) {
        callback(new Error("密码长度为6-32位"));
      } else {
        callback();
      }
    }
  },
};
</script>

<style scoped>
.reg_container {
  height: 100%;
  background-image: url("../assets/imgs/background.svg");
  overflow: hidden;
}

.reg_box {
  width: 70%;
  height: 60%;
  background-color: white;
  border-radius: 3px;
  margin: 5% auto;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.image {
  height: 100%;
  width: 55%;
  background: url("../assets/imgs/login_image.png") no-repeat;
}

.reg_form {
  margin-top: 30px;
}

.buttons {
  margin-top: 25px;
  text-align: center;
}

h2{
  text-align: center;
  color: #2a7dff;
}

.input{
  width: 60%;
  margin: 14px auto;
}

.reg_btn {
  width: 60%;
}

.footer {
  text-align: center;
  margin-top: 8%;
  font-size: 12px;
}

.routerLink{
  text-decoration: none;
  color: #2a7dff;
}

.routerLink:hover{
  color: coral;
}

</style>